<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./template.xhtml">
    <ui:define name="head">
        <style type="text/css">
            .ui-row-editor .ui-row-editor-pencil {
                margin-left:8px;
            }
        </style>
    </ui:define>
    
    <ui:define name="title">
        DataTable - <span class="subitem">Edit</span>
    </ui:define>

    <ui:define name="description">
        Data displayed on datatable can be edited at row or cell level.
    </ui:define>

    <ui:param name="documentationLink" value="/components/datatable" />

    <ui:define name="implementation">

         <h:form id="form">
            <p:growl id="msgs" showDetail="true"/>

            <p:dataTable id="cars1" var="car" value="#{dtEditView.cars1}" editable="true" style="margin-bottom:20px">
                <f:facet name="header">
                    Row Editing
                </f:facet>

                <p:ajax event="rowEdit" listener="#{dtEditView.onRowEdit}" update=":form:msgs" />
                <p:ajax event="rowEditCancel" listener="#{dtEditView.onRowCancel}" update=":form:msgs" />

                <p:column headerText="Id">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{car.id}" /></f:facet>
                        <f:facet name="input"><p:inputText id="modelInput" value="#{car.id}" style="width:100%"/></f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Year">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{car.year}" /></f:facet>
                        <f:facet name="input"><p:inputText value="#{car.year}" style="width:100%" label="Year"/></f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Brand">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
                        <f:facet name="input">
                            <h:selectOneMenu value="#{car.brand}" style="width:100%">
                                <f:selectItems value="#{dtEditView.brands}" var="man" itemLabel="#{man}" itemValue="#{man}" />
                            </h:selectOneMenu>
                        </f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Color">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{car.color}" /></f:facet>
                        <f:facet name="input">
                            <h:selectOneMenu value="#{car.color}" style="width:100%">
                                <f:selectItems value="#{dtEditView.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
                            </h:selectOneMenu>
                        </f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column style="width:35px">
                    <p:rowEditor />
                </p:column>
            </p:dataTable>

            <p:dataTable id="cars2" var="car" value="#{dtEditView.cars2}" editable="true" editMode="cell" widgetVar="cellCars">
                <f:facet name="header">
                    Cell Editing with Click and RightClick
                </f:facet>

                <p:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}" update=":form:msgs" />

                <p:column headerText="Id">
                       <p:cellEditor>
                           <f:facet name="output"><h:outputText value="#{car.id}" /></f:facet>
                           <f:facet name="input"><p:inputText id="modelInput" value="#{car.id}" style="width:96%"/></f:facet>
                       </p:cellEditor>
                   </p:column>

                   <p:column headerText="Year">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{car.year}" /></f:facet>
                        <f:facet name="input"><p:inputText value="#{car.year}" style="width:96%" label="Year"/></f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Brand">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
                        <f:facet name="input">
                            <h:selectOneMenu value="#{car.brand}" style="width:100%">
                                <f:selectItems value="#{dtEditView.brands}" var="man" itemLabel="#{man}" itemValue="#{man}" />
                            </h:selectOneMenu>
                        </f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Color">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{car.color}" /></f:facet>
                        <f:facet name="input">
                            <h:selectOneMenu value="#{car.color}" style="width:100%">
                                <f:selectItems value="#{dtEditView.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
                            </h:selectOneMenu>
                        </f:facet>
                    </p:cellEditor>
                </p:column>
            </p:dataTable>
            
            <p:contextMenu for="cars2" widgetVar="cMenu">   
                <p:menuitem value="Edit Cell" icon="pi pi-search" onclick="PF('cellCars').showCellEditor();return false;"/>  
                <p:menuitem value="Hide Menu" icon="pi pi-times" onclick="PF('cMenu').hide()"/>  
            </p:contextMenu> 
         </h:form>
        
    </ui:define>

</ui:composition>